import React from 'react';
import {App, Button, Card, Form, Input, InputNumber} from "antd";
import {Link, useNavigate} from "react-router-dom";
import TextArea from "antd/es/input/TextArea";
import {SecurityRole} from "type/SecurityRole";
import LogFactory from "log/LogFactory";
import {useAppDispatch} from "../../../redux/hook";
import {fetchAddRole} from "../../../redux/reducer/roleReducer";

const log = LogFactory.getLog("RoleAddComponent");
const RoleAddComponent = () => {
    const navigate = useNavigate() ;
    const dispatch = useAppDispatch() ;
    const { message } = App.useApp();

    const onFinish = async (values: SecurityRole) => {
        let res = await dispatch(fetchAddRole(values)).unwrap().then(res => res) ;
        if (res > 0){
            message.success("添加角色信息成功")
                .then(() => navigate("../",{replace: true}));
        }else {
            message.info("添加角色信息失败") ;
        }
    };
    const initialValues: Partial<SecurityRole> = {
        weight: 1,
        order: 1,
    }

    return (
        <Card
            title={"添加角色信息"}
            extra={ <Link to={"../"}>角色列表</Link> }
        >
            <Form<SecurityRole>
                // form={form}
                layout={"horizontal"}
                // labelWrap={false}
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 10 }}
                onFinish={ onFinish }
                initialValues={initialValues}
            >
                <Form.Item<SecurityRole> label="角色定义" name={"authority"}>
                    <Input />
                </Form.Item>
                <Form.Item<SecurityRole> label="角色描述" name={"explain"}>
                    <Input />
                </Form.Item>
                <Form.Item<SecurityRole> label="角色图标" name={"icon"}>
                    <Input />
                </Form.Item>
                <Form.Item<SecurityRole> label="角色权重" name={"weight"}>
                    <InputNumber min={1} max={200}/>
                </Form.Item>
                <Form.Item<SecurityRole> name="order" label="数据排序">
                    <InputNumber min={0}/>
                </Form.Item>
                <Form.Item<SecurityRole> label="备注信息" name={"remark"}>
                    <TextArea rows={3} />
                </Form.Item>
                <Form.Item wrapperCol={{offset: 8,span:16}}>
                    <Button type="primary" htmlType="submit">添加</Button>
                </Form.Item>
            </Form>

        </Card>
    );
};

export default RoleAddComponent;